<template>
  <div class="loginContainer">
    <el-row justify="space-around">
      <!-- 响应式布局：宽度<768px时，占用0个栅格 -->
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="20">
        <el-card class="formBox" shadow="always">
          <el-form
            ref="formRef"
            class="loginForm"
            :model="formData"
            :rules="rules"
            label-position="top"
            label-width="54px"
          >
            <h1>Hello</h1>
            <h2>欢迎来到硅谷甄选</h2>
            <el-form-item label="用户名" prop="username">
              <el-input
                :prefix-icon="User"
                v-model="formData.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                :prefix-icon="Lock"
                v-model="formData.password"
                type="password"
                show-password
                placeholder="请输入密码"
                @keyup.enter="login"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="loginButton"
                :loading="loading"
                type="primary"
                @click="login"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useUserStore } from "@/store/modules/user";
import { useRouter, useRoute} from "vue-router";
import { ElNotification } from "element-plus";
import { getTime } from "@/utils/time";

// 获取表单对象
let formRef = ref();
// 表单数据
let formData = reactive({
  username: "admin",
  password: "111111",
});
// 自定义校验规则
const validUser = (rule: any, value: any, callback: any) => {
  // rule：校验规则对象；value：表单元素内容；callback：放行方法
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error("账号长度至少是五位"));
  }
};
const validPwd = (rule: any, value: any, callback: any) => {
  // rule：校验规则对象；value：表单元素内容；callback：放行方法
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error("密码长度至少是六位"));
  }
};
// 表单规则对象
let rules = {
  username: [
    {
      required: true,
      trigger: "change",
      validator: validUser,
    },
  ],
  password: [
    {
      required: true,
      trigger: "change",
      validator: validPwd,
    },
  ],
};
// 路由器对象
const $router = useRouter();
// 路由对象
const $route = useRoute();
// 按钮加载效果
let loading = ref(false);
// 创建用户仓库对象
const userStore = useUserStore();
// 登录按钮回调
const login = () => {
  // 表单验证全部通过后再发请求
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      // 开始加载
      loading.value = true;
      try {
        // 发送登录请求
        await userStore.getLoginInfo(formData);
        // 登录时判断路由信息中是否存在redirect信息
        let redirect = $route.query?.redirect;
        redirect ? $router.push(redirect as string) : $router.push("/");
        ElNotification({
          type: "success",
          message: "欢迎回来",
          title: `Hi，${getTime()}好`,
        });
      } catch (error) {
        ElNotification({
          type: "error",
          // 使用TS的类型断言将变量认定是某个类型
          message: (error as Error).message,
        });
      } finally {
        loading.value = false;
      }
    }
  });
};
</script>

<style scoped lang="scss">
.loginContainer {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/background.jpeg") no-repeat;
  background-size: cover; // 图片大小要覆盖盒子
  .formBox {
    position: relative;
    top: 28vh;
    width: 60%;
    background-color: rgba(255, 0, 0, 0.1);
    .loginForm {
      color: white;
      h1 {
        font-size: 30px;
      }
      h2 {
        font-size: 20px;
        margin: 20px 0px;
      }
      :deep(.el-form-item__label) {
        color: black;
        font-weight: bold;
      }
      .loginButton {
        width: 100%;
        margin-top: 5px;
        margin-bottom: -10px;
      }
    }
  }
}
</style>
